<template>
  <div class="examInfo">
    <div class="topView">
      <span v-if="question.type == 0">单选题</span>
      <span v-if="question.type == 1">多选题</span>
      <span v-if="question.type == 2">判断题</span>
      （{{ questionObj.nowTypeNum }}/{{questionObj.totalTypeNum}}题，合计{{questionObj.totalTypeScore}}分）
      <div class="left" @click="preQ" v-if="questionObj.nowNum != 1">上一题</div>
      <div class="left" v-else></div>
      <div class="right" @click="nextQ" v-if="questionObj.nowNum != questionObj.totalNum">下一题</div>
      <div class="right" v-else></div>
    </div>
    <div class="questionView">
      <div class="title">
        <span class="questionType" style="background-color: #3ccba6" v-if="question.type == 0">单选</span>
        <span class="questionType" style="background-color: #02aceb" v-if="question.type == 1">多选</span>
        <span class="questionType" style="background-color: #7077f5" v-if="question.type == 2">判断</span>
        {{ question.question }}({{ question.standardScore }}分)
      </div>
      <div class="optionList">
        <div class="option" v-for="(item,index) in question.answerOptionList"
             :class="{'active':question.personalAnswerArr.indexOf(item.id) > -1,'wrong':question.personalAnswer != question.rightAnswer}">
          {{ item.optionCode}}.{{ item.optionName }}
        </div>
      </div>
      <div class="answer" :class="{'wrong':question.personalAnswer != question.rightAnswer}">正确答案：{{question.rightAnswer}}</div>
    </div>
    <div class="bottomView">
      <div class="time">
        得分：<span :class="{'active':examInfo.paperScore<examInfo.passingScore}">{{examInfo.paperScore}}</span>
        <span class="des">(及格线：{{examInfo.passingScore}})</span>
      </div>
      <div class="showCard" @click="showChard">答题卡({{ questionObj.answeredNum }}/{{ questionObj.totalNum }})</div>
    </div>
    <van-popup v-model="cardShow" position="bottom" :style="{ height: '80%' }" >
      <van-collapse v-model="activeNames">
        <van-collapse-item title="单选题" name="1">
          <div class="questionList">
            <div class="block" @click="goQuestion(item)"  v-for="(item,index) in singleChoice"
                 :class="{'active':item.personalAnswerArr.length > 0,'wrong':item.personalAnswer != item.rightAnswer}">{{index+1}}</div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="多选题" name="2">
          <div class="questionList">
            <div class="block" @click="goQuestion(item)" v-for="(item,index) in multipleChoice"
                 :class="{'active':item.personalAnswerArr.length > 0,'wrong':item.personalAnswer != item.rightAnswer}">{{index+1}}</div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="判断题" name="3">
          <div class="questionList">
            <div class="block" @click="goQuestion(item)" v-for="(item,index) in judge"
                 :class="{'active':item.personalAnswerArr.length > 0,'wrong':item.personalAnswer != item.rightAnswer}">{{index+1}}</div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-popup>
  </div>
</template>

<script>
import path from "path";
export default {
  data() {
    return {
      pageNo:1,//页码
      pageSize:5,//页数
      total:1,
      examInfo:{},
      listId: 'list' + Math.floor(Math.random() * 100000),
      timeShow:'',
      timeIn:1,
      cardShow:false,
      activeNames:['1','2','3'],
      singleChoice:[],
      multipleChoice:[],
      judge:[],
      questionList:[],
      question:{},
      roomId:null,
      examTime:null,
      questionObj:{
        answeredNum:0,
        nowNum:1,
        totalNum:0,
        totalScore:0,
        nowTypeNum:1,
        totalTypeNum:1,
        totalTypeScore:0,
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timeIn)
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    showChard(){
      this.cardShow = true
    },
    getInfo(){
      this.roomId = this.$route.query.roomId
      let obj = {
        roomId:this.roomId,
        viewMode:2,
      }
      const self = this;
      this.request({
        url: '/exam/ztExamRoom/getHistoryRoomPersonPaperBySearch',
        method: 'post',
        data:obj
      }).then(function (res) {
        if (res){
          let examInfo = res.data.result
          self.examInfo = examInfo
          self.initExamData(examInfo)
        }
      })
    },
    initExamData(examInfo){
      let questionList = examInfo.questionList
      let singleChoice = [];
      let multipleChoice = [];
      let judge = [];
      questionList.forEach(function (val) {
        if (val.type == 0){
          singleChoice.push(val)
        }else if (val.type == 1){
          multipleChoice.push(val)
        }else {
          judge.push(val)
        }
      })
      this.singleChoice = singleChoice;
      this.multipleChoice = multipleChoice;
      this.judge = judge;
      this.questionList = singleChoice.concat(multipleChoice).concat(judge)
      this.question = this.questionList[0]
      this.initQuestionObj()
    },
    preQ(){
      let nowNum = this.questionObj.nowNum
      if (nowNum>1){
        nowNum--
        this.question = this.questionList[nowNum-1]
        this.initQuestionObj()
      }
    },
    nextQ(){
      let nowNum = this.questionObj.nowNum
      if (nowNum<this.questionObj.totalNum){
        nowNum++
        this.question = this.questionList[nowNum-1]
        this.initQuestionObj()
      }
    },
    initQuestionObj(){
      let question = this.question
      let answeredNum= 0,nowNum = 0,totalNum = 0,totalScore = 0,nowTypeNum = 0,totalTypeNum = 0,totalTypeScore=0;
      let questionList = this.questionList;
      totalNum = questionList.length
      questionList.forEach(function (value, index, array) {
        if (value.personalAnswerArr.length > 0){
          answeredNum++
        }
        if (value.id == question.id){
          nowNum = index+1;
        }
        totalScore += value.standardScore;
      })
      let typeQuestionList = []
      if (question.type == 0){
        typeQuestionList = this.singleChoice
      }else if (question.type == 1){
        typeQuestionList = this.multipleChoice
      }else {
        typeQuestionList = this.judge
      }
      totalTypeNum = typeQuestionList.length
      typeQuestionList.forEach(function (value, index, array) {
        if (value.id == question.id){
          nowTypeNum = index+1;
        }
        totalTypeScore += value.standardScore;
      })
      this.questionObj = {
          answeredNum:answeredNum,
          nowNum:nowNum,
          totalNum:totalNum,
          totalScore:totalScore,
          nowTypeNum:nowTypeNum,
          totalTypeNum:totalTypeNum,
          totalTypeScore:totalTypeScore,
      }
    },
    goQuestion(question){
      this.question = question
      this.cardShow = false
      this.initQuestionObj()
    },
  }
}
</script>
<style lang="scss" scoped>
  .topView{
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0px;
  text-align: center;
  font-size: 30px;
  line-height: 100px;
  height: 100px;
  border-bottom: 1px solid gainsboro;
  color: #333;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
  background-color: white;
  .left{
    float: left;
    width: 120px;
    color: #5bc97c;
    font-size: 26px;
    height: 100%;
  }
  .right{
    float: right;
    width: 120px;
    color: #5bc97c;
    font-size: 26px;
    height: 100%;
  }
}
  .questionView{
    margin-top: 100px;
    margin-bottom: 100px;
    width: 100%;
    overflow: hidden;
    background-color: white;
    box-sizing: border-box;
    padding: 30px;
    text-align: left;
    .title{
      font-size: 32px;
      line-height: 50px;
      .questionType{
        font-size:18px;
        color:white;
        background-color:red;
        padding:5px 10px;
        margin-left:10px;
        border-radius:5px;
      }
    }
    .optionList{
      width: 100%;
      overflow: hidden;
      margin-top: 30px;
      .option{
        width: 100%;
        overflow: hidden;
        font-size: 26px;
        color: #666;
        margin-bottom: 40px;
        line-height: 40px;
        border-radius: 40px;
        border: 1px solid gainsboro;
        padding: 20px 30px;
        box-sizing: border-box;
        word-wrap:break-word;
        &.active{
          background-color: #1296db;
          border-color: transparent;
          color: white;
          &.wrong{
            background-color: red;
            border-color: transparent;
            color: white;
          }
        }
      }
    }
    .answer{
      font-size: 30px;
      color: #333333;
      &.wrong{
        color: red;
      }
    }
  }
  .bottomView{
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 28px;
    background-color: white;
    position: fixed;
    bottom: 0px;
    border-top: 1px solid gainsboro;
    .time{
      width: 65%;
      float: left;
      .active{
        color: red;
      }
      .des{
        font-size: 22px;
        color: #666666;
        margin-left: 20px;
      }
    }
    .showCard{
      width: 35%;
      color: white;
      background-color: #1296db;
      float: left;
    }
  }
  .questionList{
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    .block{
      width: 60px;
      height: 60px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid gainsboro;
      line-height: 58px;
      float: left;
      margin-right: 16px;
      margin-bottom: 20px;
      color: #666666;
      &.active{
        background-color: #5bc97c;
        color: white;
        border-color: #5bc97c;
        &.wrong{
          background-color: red;
          color: white;
          border-color: red;
        }
      }
    }
  }
/*  .preQ{
    width: 80px;
    height: 80px;
    position: fixed;
    z-index: 99;
    left: 30px;
    top: 50%;
    margin-top: -40px;
    background-image: url("../../assets/img/pre.png");
    background-size: 100% 100%;
  }*/
</style>
